<template>
  <view class="container">
    <!-- 顶部图片 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="banner">
      <swiper-item class="banner" v-for="(item2, index2) in info.details_images" :key="index2">
        <view class="banner">
          <image class="banner" :src="$getimgsrc(item2)" style=""></image>
        </view>
      </swiper-item>
    </swiper>
    <view style="height: 480rpx; position: relative; z-index: 9"></view>
    <view class="bottom">
      <!-- 标题 -->
      <view class="top">
        <text style="font-size: 30rpx; font-weight: 700">{{ info.title }}</text>
        <view class="num">
          <image class="two" src="@/static/myimg/a12.png" style="vertical-align: top"></image>
          <text class="text_0">时间: {{ util.timeChange2(info.starttime) }} - {{ util.timeChange2(info.endtime) }}</text>
        </view>
        <view class="num">
          <image class="two" src="@/static/myimg/a14.png" style="vertical-align: top"></image>
          <text style="display: inline-block; width: 80rpx; margin: 0 0 0 10rpx">地点:</text>
          <text class="text_0">{{ info.address }}</text>
        </view>
      </view>
      <!-- 人数 -->
      <view class="number">
        <view class="top_0">
          <view class="num">
            <view>
              <image class="two" src="@/static/myimg/a12.png"></image>
              <text>人数 {{ info.join_num }}/{{ info.num }}</text>
            </view>
            <view>
              <view class="color">
                <image src="@/static/myimg/a11.png" style="width: 100rpx; height: 40rpx"></image>
                <text>{{ info.girl_num }}</text>
              </view>
              <view class="color" style="margin-left: 10rpx">
                <image src="@/static/myimg/a10.png" style="width: 100rpx; height: 40rpx"></image>
                <text>{{ info.male_num }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="bottom_0">
          <image :src="$getimgsrc(item.avatar)" v-if="index < 6" v-for="(item, index) in info.userlist" :key="index" />
        </view>
      </view>
      <!-- 发起者 -->
      <view class="self">
        <view class="num">
          <view>
            <image class="two" src="@/static/myimg/a16.png" style="width: 40rpx; height: 40rpx; vertical-align: bottom"></image>
            <text style="display: inline-block; height: 100%; line-height: 40rpx; margin: 0 30rpx 0 10rpx">发起者</text>
          </view>
        </view>
        <view class="picture">
          <view class="left">
            <image :src="$getimgsrc(info.avatar)" style="margin-left: 0" />

            <text style="margin-left: 20rpx">{{ info.nickname }}</text>
          </view>
          <view class="right" style="background-color: #feff01" @click="util.urlTo('/dynamic/sixin/sixin?id=' + info.user_id)">私信TA</view>
        </view>
      </view>
      <!-- 详情 -->
      <view class="details">
        <text style="font-weight: 700; display: block; margin-bottom: 30rpx">详情</text>
        <view style="line-height: 50rpx">
          {{ info.content || '' }}
        </view>
        <image v-for="(item, index) in info.details_images" :src="$getimgsrc(item)" mode=""></image>
      </view>
      <!-- 提示 -->
      <view class="tips">
        <view class="num">
          <view>
            <image class="two" src="@/static/myimg/a17.png" style="width: 40rpx; height: 40rpx; vertical-align: bottom"></image>
            <text style="display: inline-block; height: 100%; line-height: 40rpx; margin: 0 30rpx 0 10rpx; font-weight: 700">温馨提示</text>
          </view>
        </view>
        <view class="text">
          <text>1、本次活动名额有限，先报先得。</text>
          <text>2、报名成功后请按时参与，因特殊原因情况不能到场可提前联系发起者取消。</text>
        </view>
      </view>
    </view>
    <view class="" style="height: 300rpx"></view>
    <view class="btn" v-if="info.status == 1">
      <view class="creatact">审核中</view>
    </view>
    <view class="btn" v-if="info.status == 3">
      <view class="creatact" style="background-color: #ff3742" @click="yuanying">审核未通过，查看原因</view>
    </view>
    <uni-popup ref="popup" type="center">
      <view class="" style="width: 570rpx; background-color: #ffffff; border-radius: 20rpx; text-align: center">
        <view class="" style="padding: 30rpx 0rpx">未通过原因</view>
        <view class="" style="font-weight: bold; padding: 0rpx 0rpx 30rpx 0rpx">{{ info.refuse || '' }}</view>
        <view class="" style="border-top: 1rpx solid #e8e8e8; padding: 30rpx" @click="$refs.popup.close()">
          <text>我知道了</text>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: null,
      info: {}
    };
  },
  onLoad(data) {
    this.id = data.id;
    this.getinfo();
  },
  methods: {
    yuanying() {
      this.$refs.popup.open();
    },
    getinfo() {
      this.http('/doings/details', {
        doings_id: this.id
      }).then((res) => {
        this.info = res.data;
        console.log(this.info);
      });
    }
  }
};
</script>

<style lang="scss">
.banner {
  position: absolute;
  top: 0;
  width: 100%;
  height: 500rpx;
  background-color: saddlebrown;
  z-index: 10;
}
.bottom {
  width: 100%;
  height: 100%;
  border-radius: 50rpx 50rpx 0 0;
  background-color: #f8f8f8;
  margin-top: -20rpx;
  position: relative;
  z-index: 11;
  .top {
    height: 100%;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 50rpx 50rpx 0 0;
    margin-bottom: 20rpx;
    .num {
      margin-top: 30rpx;
      .two {
        width: 40rpx;
        height: 40rpx;
        vertical-align: bottom;
      }
      text {
        display: inline-block;
        height: 100%;
        line-height: 40rpx;
        margin: 0 30rpx 0 10rpx;
        // 限制长度
      }
      .text_0 {
        width: 500rpx;
        vertical-align: top;
      }
      .color {
        display: inline-block;
        position: relative;
        image {
          vertical-align: top;
        }
        text {
          position: absolute;
          right: 0;
          color: #ffffff;
        }
      }
    }
  }
  .number {
    background-color: #fff;
    margin-bottom: 20rpx;
    padding: 30rpx;
    .num {
      display: flex;
      justify-content: space-between;
      margin: 10rpx 0;
      .two {
        width: 40rpx;
        height: 40rpx;
        vertical-align: bottom;
      }
      text {
        display: inline-block;
        height: 100%;
        line-height: 40rpx;
        margin: 0 30rpx 0 10rpx;
        // 限制长度
      }
      .text_0 {
        width: 300rpx;
        font-size: 24rpx;
        vertical-align: top;
      }
      .color {
        display: inline-block;
        position: relative;
        image {
          vertical-align: top;
        }
        text {
          position: absolute;
          right: 0;
          color: #ffffff;
        }
      }
    }
    .bottom_0 {
      margin-top: 30rpx;
      image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 40rpx;
        margin-left: -20rpx;
        vertical-align: middle;
      }
    }
  }
  .self {
    background-color: #fff;
    margin-bottom: 20rpx;
    padding: 30rpx;
    .picture {
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;
      .left {
        image {
          width: 80rpx;
          height: 80rpx;
          border-radius: 40rpx;
          margin-left: -20rpx;
          vertical-align: middle;
        }
      }
      .right {
        width: 160rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;

        border-radius: 20rpx;
      }
    }
  }
  .details {
    background-color: #fff;
    padding: 30rpx;
    margin-bottom: 20rpx;
    image {
      width: 200rpx;
      height: 200rpx;
      border-radius: 20rpx;
      margin: 10rpx;
    }
  }
  .tips {
    background-color: #fff;
    margin-bottom: 20rpx;
    padding: 30rpx;
    .text {
      text {
        display: block;
        margin: 20rpx 0;
      }
    }
  }
}
.btn {
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 750rpx;
  height: 156rpx;
  background: #ffffff;
  box-shadow: 0rpx -4rpx 12rpx 2rpx rgba(0, 0, 0, 0.12);
  padding: 8rpx 30rpx;
  z-index: 99;
  .creatact {
    width: 690rpx;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    background: #cccfdb;
    font-weight: bold;
    color: #fff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
}
</style>
